<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>地图</title>
<link rel="stylesheet" href="css/map.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/touch.min.js"></script>

<style type="text/css">



</style>
</head>
<body >
	<div id="logger" style="width: 300px;background-color: white;height: 100px;">
		
	</div>
	<div id="hid" style = "position: fixed;top:0; left:0;z-index: -1;">
		<img id="target" src="images/map.jpg" draggable="false"  />
	</div>
	
</body>
<!--
	作者：offline
	时间：2016-09-07
	描述：
	<script type="text/javascript" src="js/map.js"></script>
-->


<script>
$(function() {
	var target = document.getElementById("target");
	target.style.webkitTransition = 'all ease 0.7s';
	//触摸事件
	touch.on('#target', 'touchstart', function(ev) {
		ev.preventDefault();
		
		$("#logger").html("抓取并拖拽目标元素,x:"+ev.x +"  y"+ev.y);
	});
	var dx, dy;
	//拖动事件
	touch.on('#target', 'drag', function(ev) {
	dx = dx || 0;
	dy = dy || 0;
	//加速5倍
	var offx = ((dx + ev.x)*5) + "px";
	var offy = ((dy + ev.y)*5) + "px";
	
	this.style.webkitTransform = "translate3d(" + offx + "," + offy + ",0)";
	$("#logger").html("当前x值为:" + dx + ", 当前y值为:" + dy + ".");
	});
	//拖动后
	touch.on('#target', 'dragend', function(ev) {
	dx += ev.x;
	dy += ev.y;
	$("#logger").html("当前x值为:" + dx + ", 当前y值为:" + dy + ".");
	});
		
		var currentScale;
	
});
</script>
</html>
